﻿{% extends 'base.html' %}
{% block title %}欢迎光临首页{% endblock %}
{% block content %}
<div class="container" >
	<!--导航栏 -->
	<div class="row" id="nav">
		<div class="col-md-11">
		<ul class="nav nav-tabs">
			  <li role="presentation" class="active"><a href="#">主页</a></li>
			  <li role="presentation"><a href="#">图书</a></li>
			  <li role="presentation"><a href="#">论文</a></li>
		</ul>
		
		</div>
	</div>
	<!--巨幕-->
	<div class="row" id="jump">
		<div class="col-md-11" >
		<div class="jumbotron "  style=" background-image:url(/static/pic/Lib.jpg);background-size:100% 100%;position:relative;padding-top:20px;">		 
		  <form action="/show" class="form-inline" method="get" style="position:relative;top:5px">		    
			<label class="form-label" style="font-size:25px">江苏理工学院图书馆欢迎您使用！</label>
			<input type="text" class="form-control" placeholder="Search for..." name="keyword">
			<button class="btn btn-info form-control" type="submit">搜索</button>
		  </form>
		  <p> ·</p>
		  <p> ·</p>
		  <p> ·</p>
		  <p> ·</p>
		  <p> ·</p>	
		  <!--<p><a class="btn btn-primary btn-lg" href="#" role="button">了解更多</a></p>-->
		</div>
		</div>
	</div>
	<!--图像，保持格式 -->
	<div class="row" id="icon">
	    <div class="col-md-10">
		<span class="glyphicon glyphicon-cloud" aria-hidden="true"></span>
		</div>
	</div>
	<!--图书论文展示区 -->
	<div class="row" id="content">
		<div class="col-md-6">
			<a href="#" class="list-group-item active">随机图书鉴赏</a>
			<ul class="list-group"  style="min-height:250px;overflow-y:auto;max-height:300px;">
				{%for item in res_book%}
				<li class="list-group-item" data-toggle="modal" data-target="#myModal{{item.callId}}"><a href='/recommend/?id={{item.id}}&type=book&weight='>{{item.title}}</a></li>
				<!-- 模态框（Modal） -->
					<div class="modal fade" id="myModal{{item.callId}}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
						<div class="modal-dialog">
							<div class="modal-content">
								<div class="modal-header">
									<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
									<h4 class="modal-title" id="myModalLabel">《{{item.title}}》的详细资料</h4>
								</div>
								<div class="modal-body">图书ID：{{item.callId}}<br>作者：{{item.author}}<br>出版社：{{item.publisher}}<br>出版年月：{{item.pubYear}}<br>中图法分类：{{item.isbn}}</div>
								<div class="modal-footer">
									<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
								</div>
							</div><!-- /.modal-content -->
						</div><!-- /.modal -->
					</div>
				{%endfor%}
			</ul>
		</div>
		<div class="col-md-5" >
			<a href="#" class="list-group-item active">随机论文鉴赏</a>
			<ul class="list-group" style="min-height:250px;overflow-y:auto;max-height:300px;">
				{%for item in res_paper%}
				<li class="list-group-item" title={{item.intro}} data-toggle="modal" data-target="#myModal{{item.id}}"><a href='/recommend/?id={{item.id}}&type=paper&weight='>{{item.title}}</a></li>
				<!-- 模态框（Modal） -->
					<div class="modal fade" id="myModal{{item.id}}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
						<div class="modal-dialog">
							<div class="modal-content">
								<div class="modal-header">
									<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
									<h4 class="modal-title" id="myModalLabel">《{{item.title}}》的详细资料</h4>
								</div>
								<div class="modal-body">论文ID：{{item.paperId}}<br>链接：{{item.url}}<br>简介：{{item.intro}}</div>
								<div class="modal-footer">
									<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
								</div>
							</div><!-- /.modal-content -->
						</div><!-- /.modal -->
					</div>
				{%endfor%}
			</ul>
		</div>
	</div>
</div>
{% endblock %}